<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: String,
  configs: Object
})

const emit = defineEmits(["changeContent"])

const curContent = ref(props.modelValue)
const ueditorConfig = ref({
    // 后端服务地址，后端处理参考
    // https://open-doc.modstart.com/ueditor-plus/backend.html
    serverUrl: $Common.uploadBaseUrl + '/api/UEditor/Do',
    UEDITOR_HOME_URL: '/static/UEditorPlus/',
    UEDITOR_CORS_URL: '/static/UEditorPlus/',
    // 编辑器自动被内容撑高
    autoHeightEnabled: true,
    // 工具栏是否可以浮动
    autoFloatEnabled: false,
    // 初始容器高度
    initialFrameHeight: 250,
    // 初始容器宽度
    initialFrameWidth: '100%',
    // 关闭自动保存
    enableAutoSave: true,
    // 层级基数
    zIndex: $Common.globalZindex - 4
})
ueditorConfig.value = {
  ...ueditorConfig.value,
  ...props.configs
}

watch(curContent, (val) => {
  emit("changeContent", val)
})
</script>

<template>
  <div class="comp-ueditor-box">
      <vue-ueditor-wrap v-model="curContent" editor-id="ueditor"
        :config="ueditorConfig" :editorDependencies="['ueditor.config.js','ueditor.all.js']"/>
  </div>
</template>

<style lang="scss">
.comp-ueditor-box {
  line-height: initial !important;
}
</style>